<template>
<div class="tree-area">
    <el-tree
            :data="options"
            ref="tree"
            :show-checkbox="props.item.showCheckBox ? props.item.showCheckBox  : false"
            :node-key="props.item.key ? props.item.key : 'id' "
            :default-expand-all="props.item.expandAll ? props.item.expandAll : true "
            :expand-on-click-node="props.item.expandOnClickNode ? props.item.expandOnClickNode : false"
            :render-content="props.item.renderContent ? props.item.renderContent : null "
            :default-expanded-keys="props.item.defaultExpandedKeys ? props.item.defaultExpandedKeys : [] "
            :default-checked-keys="props.form[props.item.prop] && props.form[props.item.prop].length > 0 ? props.form[props.item.prop] : [] "
            @check="threeCheck"
    ></el-tree>
</div>
</template>
<script setup>
const { proxy } = getCurrentInstance();
const props = defineProps({
    item :{
            required:true,
            type:Object,
        },
        form:{
            required:true,
            type:Object,
        }
})
let options=reactive([])
let defaultProps=reactive({
                  children: 'children',
                  label: 'label'
              })

getOptions()
function getOptions(){
    var url = props.item.url;
    var param = props.item.params ;
    if(!url){return null; }
    this.$axios
        .post(url,param)
        .then(res => {
            if(res.status == 200 && res.data.code == 1){
                options = res.data.result;
                console.log(options);
            }else{
                this.$message({
                    type:"error",
                    message:'数据查询失败，请稍后重试！！！'
                });
            }
        });
}  
function threeCheck(){
    props.form[props.item.prop]=proxy.$refs.tree.getCheckedKeys();
    // this.$emit("update:form",this.form);
}  
watch(props.item, (value) => {
  if (value.url) {
    getOptions()
  } else {
    options = value.options
  }
})



</script>
<style>
.tree-area{
    border:1px solid #DCDFE6;
    padding:10px;
    border-radius:7px;

}
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}


</style>